<template>
  <div :class="$style.wrapper">
    <ul :class="$style.tabsWrapper">
      <li :class="activeSecondTab(index)" :key="index" @click="clickSecondTab(tab,index)" v-for="(tab,index) in currentSecondTabs">
        {{tab.label}}
      </li>
    </ul>
    <router-view></router-view>
  </div>
</template>
<script>
import PsHead from './../../default/components/head/PsHead.vue';
import { mapGetters, mapState } from 'vuex';
import vpJson from '../../view-id-page.json';

export default {
  name: 'RouterSecond',
  components: {
    PsHead
  },
  watch: {
    mainTabs: {
      immediate: true,
      handler (values) {
        let mainTabs = values || [];
        let currentMainTab = mainTabs[this.$route.params.mainIndex] || {};
        this.$store.commit('role/setCurrentSecondTabs', currentMainTab.children || []);
      }
    }
  },
  methods: {
    clickSecondTab (tab, index) {
      if (index === parseInt(this.$route.params.secondIndex)) {
        return;
      }
      let thirdChildren = tab.children;
      if (thirdChildren && thirdChildren.length > 0) {
        this.$store.commit('role/setCurrentThirdTabs', thirdChildren);
        let viewId = thirdChildren[0].viewId;
        viewId = vpJson[viewId] || viewId;
        this.$router.push(`/app-sc/Third/${thirdChildren[0].showTree}/${this.currentResourceId}/${this.$route.params.mainIndex}/${index}/0/${viewId}`);
      } else {
        this.$store.commit('role/setCurrentThirdTabs', []);
        let viewId = tab.viewId;
        viewId = vpJson[viewId] || viewId;
        this.$router.push(`/app-sc/Second/${tab.showTree}/${this.currentResourceId}/${this.$route.params.mainIndex}/${index}/${viewId}`);
      }
    },
    activeSecondTab (index) {
      return index === parseInt(this.$route.params.secondIndex) ? `${this.$style.tabItem} ${this.$style['active']}` : this.$style.tabItem;
    }
  },
  computed: {
    ...mapState('role', [
      'currentSecondTabs'
    ]),
    ...mapState('resource', [
      'currentResourceId'
    ]),
    ...mapGetters('role', [
      'mainTabs'
    ]),
    currentUser () {
      return this.$store.state.user.currentUser;
    }
  }
};
</script>
<style lang="scss" module>
@import "./../../style/default/router-second.scss";
</style>
